1
00:00:02,040 --> 00:00:04,180
Sekarang apa yang kita pelajari tentang funk

2
00:00:04,180 --> 00:00:06,450
dan pencipta aksi funk,

3
00:00:06,450 --> 00:00:08,860
jadi pembuat tindakan ini berfungsi di sini.

4
00:00:08,860 --> 00:00:10,930
Sekarang, apakah kita sudah mempelajarinya,

5
00:00:10,930 --> 00:00:14,770
mari kita buat pembuat tindakan aplikasi yang mengambil keranjang

6
00:00:14,770 --> 00:00:17,150
saat aplikasi dimuat.

7
00:00:17,150 --> 00:00:19,880
Karena saat ini kami hanya mengirimkan data

8
00:00:19,880 --> 00:00:22,830
tapi kami tidak pernah mengambil data saat aplikasi dimuat.

9
00:00:22,830 --> 00:00:27,610
Dan oleh karena itu, jika kita memuat ulang, seluruh status kita masih hilang

10
00:00:27,610 --> 00:00:29,790
dan tentu saja itu bukan tujuannya.

11
00:00:29,790 --> 00:00:32,259
Sekarang kita bisa memasukkan kode itu ke dalam komponen

12
00:00:32,259 --> 00:00:33,840
atau sebagai pembuat tindakan,

13
00:00:33,840 --> 00:00:36,840
tapi di sini saya sekarang ingin tetap berpegang pada pembuat aksi

14
00:00:36,840 --> 00:00:40,010
dan karenanya kita dapat menambahkan potongan keranjang fungsi kedua.

15
00:00:40,010 --> 00:00:42,750
Namun karena file ini sekarang semakin besar,

16
00:00:42,750 --> 00:00:45,810
Saya penggemar membuat file terpisah untuk itu.

17
00:00:45,810 --> 00:00:48,930
Sebut saja cart-actions.js,

18
00:00:48,930 --> 00:00:50,830
tentu saja nama filenya terserah anda.

19
00:00:52,070 --> 00:00:55,590
Saya kemudian akan menyalin fungsi sendCartData ini,

20
00:00:55,590 --> 00:00:57,780
potong dari potongan gerobak

21
00:00:57,780 --> 00:01:01,140
dan menambahkannya tindakan keranjang

22
00:01:01,140 --> 00:01:04,540
dan sekarang kita perlu mengimpor tindakan UI di sini.

23
00:01:04,540 --> 00:01:08,470
Jadi dalam potongan gerobak, saya akan menyingkirkan impor itu, memotongnya

24
00:01:08,470 --> 00:01:11,720
dan tambahkan itu di tindakan keranjang.

25
00:01:11,720 --> 00:01:13,880
Dan di app.js, sekarang kita membutuhkannya

26
00:01:13,880 --> 00:01:15,030
untuk mengimpor sendCartsData

27
00:01:16,200 --> 00:01:18,653
dari tindakan toko/keranjang.

28
00:01:19,650 --> 00:01:22,210
Dan kemudian saya akan menambahkan fungsi pembuat tindakan aplikasi saya

29
00:01:22,210 --> 00:01:25,070
dalam file tindakan keranjang ini juga.

30
00:01:25,070 --> 00:01:28,080
Jadi itu bisa jadi adalah fungsi fetctCardData

31
00:01:29,160 --> 00:01:30,610
dan saya juga akan mengekspornya

32
00:01:30,610 --> 00:01:33,080
karena kita akan membutuhkannya di tempat lain juga.

33
00:01:33,080 --> 00:01:36,900
Dan sama seperti sebelumnya, itu akan segera mengembalikan suatu fungsi

34
00:01:36,900 --> 00:01:39,080
yang dikirim sebagai argumen

35
00:01:39,080 --> 00:01:41,330
dan kemudian melakukan sesuatu yang lain.

36
00:01:41,330 --> 00:01:45,080
Sekarang di sini kami juga dapat mengirimkan beberapa pemberitahuan

37
00:01:45,080 --> 00:01:46,520
jika kita ingin melakukan itu,

38
00:01:46,520 --> 00:01:48,700
tapi sebenarnya di sini saya tidak akan melakukan itu.

39
00:01:48,700 --> 00:01:51,480
Sebagai gantinya saya akan membuat fungsi baru, ambilData,

40
00:01:55,090 --> 00:01:57,710
dan memiliki fungsi bersarang yang async

41
00:01:57,710 --> 00:01:59,560
karena saya akan menggunakan API pengambilan

42
00:01:59,560 --> 00:02:03,150
dan saya ingin membungkus FetchData dengan mencoba menangkapnya setelahnya

43
00:02:03,150 --> 00:02:06,130
itu sebabnya saya memasukkannya ke dalam fungsi terpisah.

44
00:02:06,130 --> 00:02:09,539
Jadi kita menunggu tindakan pengambilan, dapatkan respons di sini

45
00:02:09,539 --> 00:02:12,010
dan ingin mengambil dengan mengirimkan permintaan

46
00:02:12,010 --> 00:02:14,210
ke URL yang sama lagi

47
00:02:15,140 --> 00:02:17,510
tapi kali ini seharusnya permintaan get.

48
00:02:17,510 --> 00:02:20,670
Jadi kita tidak perlu menambahkan objek konfigurasi ini

49
00:02:20,670 --> 00:02:22,380
sebagai parameter kedua,

50
00:02:22,380 --> 00:02:25,113
karena saya mendapatkan permintaan adalah defaultnya.

51
00:02:26,880 --> 00:02:30,530
Sebaliknya kali ini saya sekarang tertarik dengan datanya,

52
00:02:30,530 --> 00:02:32,890
jadi pada hasil panggilan menunggu

53
00:02:33,890 --> 00:02:35,840
respon.Json

54
00:02:35,840 --> 00:02:37,540
tapi tentu saja, saya juga masih ingin memeriksanya

55
00:02:37,540 --> 00:02:40,900
jika responnya mungkin tidak oke karena alasan apapun

56
00:02:40,900 --> 00:02:43,740
dan jika memang demikian, saya akan membuat kesalahan baru

57
00:02:44,630 --> 00:02:48,163
di mana saya berkata, "tidak dapat mengambil data keranjang"

58
00:02:49,260 --> 00:02:51,463
sesuatu seperti ini.

59
00:02:52,930 --> 00:02:56,240
Sekarang, jika kita berhasil melewati baris kode ini di sini,

60
00:02:56,240 --> 00:02:58,310
kami memiliki datanya

61
00:02:58,310 --> 00:03:00,870
dan saya kemudian akan mengembalikannya ke sini,

62
00:03:00,870 --> 00:03:02,310
Saya akan mengembalikannya ke sini karena

63
00:03:02,310 --> 00:03:05,150
itu bukan fungsi bersarang yang terpisah.

64
00:03:05,150 --> 00:03:08,743
Oleh karena itu di sini saya akan mencoba mengeksekusi FetchData

65
00:03:09,850 --> 00:03:12,893
dan menangkap kesalahan apa pun yang mungkin kami dapatkan.

66
00:03:14,720 --> 00:03:15,780
Dan jika kita mendapatkan kesalahan,

67
00:03:15,780 --> 00:03:18,760
kami mungkin masih ingin menampilkan kesalahan dalam notifikasi.

68
00:03:18,760 --> 00:03:23,330
Jadi saya akan mengirimkan tindakan pemberitahuan kesalahan ini lagi

69
00:03:23,330 --> 00:03:24,193
di bawah sini,

70
00:03:25,060 --> 00:03:27,567
tapi menurut saya, "pengambilan data kereta gagal".

71
00:03:28,660 --> 00:03:33,007
Namun jika kita adalah blok coba atau tunggu ambilData,

72
00:03:33,920 --> 00:03:35,760
Saya bisa melakukan ini

73
00:03:35,760 --> 00:03:38,893
jika saya mengubahnya menjadi fungsi async, yang kita bisa,

74
00:03:40,050 --> 00:03:41,630
Redux mendukung itu,

75
00:03:41,630 --> 00:03:44,980
disfungsi yang kami kembalikan ke sini tidak sinkron.

76
00:03:44,980 --> 00:03:46,780
Jadi kita bisa menggunakan menunggu di sini juga

77
00:03:46,780 --> 00:03:50,700
dan itu memberi saya data keranjang saya

78
00:03:50,700 --> 00:03:53,727
karena saya mengembalikan data yang kami sampaikan di sini

79
00:03:55,034 --> 00:03:58,950
dan untuk saat ini saya ingin menggunakan data keranjang itu untuk mengatur keranjang saya.

80
00:03:59,890 --> 00:04:01,810
Sekarang, data keranjang yang kita ambil,

81
00:04:01,810 --> 00:04:05,350
kita akan memiliki format yang disimpan di Firebase

82
00:04:05,350 --> 00:04:07,100
dan itulah format yang kami kirimkan

83
00:04:07,100 --> 00:04:08,910
tentu saja ke Firebase.

84
00:04:08,910 --> 00:04:11,870
Ini adalah gerobak yang kami kirim ke sana

85
00:04:11,870 --> 00:04:14,050
jadi itu adalah objek dengan kunci item,

86
00:04:14,050 --> 00:04:17,540
dengan dalam array di dalam dan kunci kuantitas total.

87
00:04:17,540 --> 00:04:20,089
Format itulah yang kita butuhkan di sini

88
00:04:20,089 --> 00:04:22,580
di front-end kami juga.

89
00:04:22,580 --> 00:04:25,000
Yang tidak mengherankan karena kami mengirimkannya

90
00:04:25,000 --> 00:04:27,060
snapshot status Redux itu

91
00:04:27,060 --> 00:04:29,610
sebagai data ke belakang dan di akhir.

92
00:04:29,610 --> 00:04:33,330
Jadi kami secara otomatis mendapatkan kembali data yang diformat dengan benar di sini

93
00:04:33,330 --> 00:04:37,030
dan kita tidak perlu mengubah data Firebase tersebut terlebih dahulu

94
00:04:37,030 --> 00:04:41,330
karena sudah formatnya, tadi kita kirimkan ke Firebase.

95
00:04:41,330 --> 00:04:44,476
Itu berbeda dari bagian lain dalam kursus ini,

96
00:04:44,476 --> 00:04:47,590
di sini kami harus mengubah data Firebase

97
00:04:47,590 --> 00:04:51,970
karena disana kami menggunakan post untuk mengirimkan data kami

98
00:04:51,970 --> 00:04:53,640
tidak dimasukkan seperti yang kita lakukan di sini

99
00:04:53,640 --> 00:04:56,850
dan karenanya kami membiarkan Firebase membuat daftar data

100
00:04:56,850 --> 00:05:00,010
yang ternyata adalah sebuah benda ketika kita mengambilnya.

101
00:05:00,010 --> 00:05:03,620
Anda mungkin mengingatnya dari bagian HTTP dalam kursus

102
00:05:03,620 --> 00:05:08,040
di sini kami mengirimkan snapshot data kami ke Firebase

103
00:05:08,040 --> 00:05:11,450
dan Firebase akan menerimanya apa adanya dan menyimpannya sebagaimana adanya

104
00:05:11,450 --> 00:05:12,830
tanpa mengubahnya.

105
00:05:12,830 --> 00:05:16,460
Jadi ketika kita mengambilnya, kita juga harus memperbaiki strukturnya

106
00:05:16,460 --> 00:05:19,720
dan karenanya data keranjang ini diformat dengan benar

107
00:05:19,720 --> 00:05:24,720
dan oleh karena itu sekarang, kita dapat menggunakan peredam kereta pengganti ini,

108
00:05:24,730 --> 00:05:28,030
yang saya berikan kepada Anda sebelumnya dalam modul ini

109
00:05:28,030 --> 00:05:30,280
untuk menggantikan keranjang front-end kami

110
00:05:30,280 --> 00:05:32,770
dengan keranjang yang kami muat dari Firebase

111
00:05:33,610 --> 00:05:35,680
dan ganti keranjang mengharapkan muatan

112
00:05:35,680 --> 00:05:37,280
yang mempunyai jumlah total

113
00:05:37,280 --> 00:05:40,540
dan bidang item yang merupakan struktur data

114
00:05:40,540 --> 00:05:42,750
kami mengambil dari Firebase.

115
00:05:42,750 --> 00:05:47,750
Jadi, dalam aksi keranjang, kami hanya ingin mengimpor

116
00:05:47,840 --> 00:05:50,620
tindakan keranjang kami

117
00:05:51,820 --> 00:05:54,500
dari potongan gerobak,

118
00:05:54,500 --> 00:05:57,633
jadi tindakan ini dihasilkan secara otomatis sekarang.

119
00:05:59,480 --> 00:06:04,480
Dan di sini, saya kemudian ingin mengirimkan pengganti tindakan keranjang,

120
00:06:04,920 --> 00:06:07,580
tidak menghapus, ganti keranjang

121
00:06:07,580 --> 00:06:10,280
dan meneruskan data troli saya sebagai muatan,

122
00:06:10,280 --> 00:06:13,563
yang seperti disebutkan sudah memiliki struktur yang benar.

123
00:06:14,850 --> 00:06:17,410
Sekarang kita bisa melakukan semuanya untuk menampilkan pemberitahuan sukses

124
00:06:17,410 --> 00:06:20,470
tapi saya tidak ingin melakukan itu, saya hanya ingin menggunakan data keranjang

125
00:06:20,470 --> 00:06:21,963
dan kami siap berangkat.

126
00:06:23,120 --> 00:06:27,820
Setelah semua selesai, sekarang kita hanya perlu memanggil mengambil cartData

127
00:06:27,820 --> 00:06:30,090
suatu tempat di aplikasi kita

128
00:06:30,090 --> 00:06:33,950
untuk mulai mengambil cartData kami dari Firebase.

129
00:06:33,950 --> 00:06:37,560
Dan sekali lagi, app.js mungkin adalah tempat yang bagus untuk itu.

130
00:06:37,560 --> 00:06:40,500
Di sini kita sudah memiliki panggilan fakta pengguna

131
00:06:40,500 --> 00:06:43,270
dan kami ingin mulai mengambil data di sini

132
00:06:43,270 --> 00:06:45,680
jika aplikasi ini dimuat.

133
00:06:45,680 --> 00:06:48,530
Kita bisa melakukannya di sini, dalam pemeriksaan isInitial ini

134
00:06:48,530 --> 00:06:51,000
karena ayah hanya akan lari jika ini pertama kalinya

135
00:06:51,000 --> 00:06:52,470
agar efek ini berjalan.

136
00:06:52,470 --> 00:06:55,240
Tapi menurut saya lebih bersih untuk menciptakan efek tersendiri

137
00:06:55,240 --> 00:06:57,710
yang tidak memiliki ketergantungan apa pun

138
00:06:57,710 --> 00:06:59,910
dan karena itu semua hanya akan mereka jalankan

139
00:06:59,910 --> 00:07:04,500
jika komponen ini dirender untuk pertama kalinya

140
00:07:04,500 --> 00:07:06,400
dan karena itu adalah komponen utama kami

141
00:07:06,400 --> 00:07:08,230
ini hanya akan ditampilkan satu kali.

142
00:07:08,230 --> 00:07:12,030
Dan oleh karena itu di sini kami dapat mengirimkannya

143
00:07:12,030 --> 00:07:15,950
tindakan keranjang baru ini dibuat, tindakan keranjang khusus ini.

144
00:07:15,950 --> 00:07:19,060
Jadi tindakan FetchcartData ini,

145
00:07:19,060 --> 00:07:20,950
Saya ingin mengirimkan ini ke sini

146
00:07:21,920 --> 00:07:25,630
dan dikirim sebagai ketergantungan demi kelengkapan

147
00:07:25,630 --> 00:07:27,800
tapi seperti yang kubilang, itu tidak akan pernah berubah,

148
00:07:27,800 --> 00:07:30,030
jadi efek ini tidak akan pernah muncul kembali

149
00:07:30,030 --> 00:07:33,970
dan itu akan mengirimkan ini setiap kali aplikasi kita dimulai.

150
00:07:33,970 --> 00:07:37,070
Oleh karena itu jika Anda menyimpan ini dan memuat ulang Anda akan melihatnya

151
00:07:37,070 --> 00:07:39,140
bahwa ini akan dihuni.

152
00:07:39,140 --> 00:07:41,710
Namun Anda juga akan menyadarinya karena alasan tertentu

153
00:07:41,710 --> 00:07:44,940
kami juga melihat data keranjang terkirim berhasil di sini

154
00:07:46,100 --> 00:07:48,900
dan kami mengirimkan permintaan ke Firebase

155
00:07:48,900 --> 00:07:52,020
untuk menyimpan data keranjang lagi.

156
00:07:52,020 --> 00:07:54,130
Jadi kami mengambilnya, seperti yang kami tahu

157
00:07:54,130 --> 00:07:55,900
kami memiliki data keranjang kami di sini

158
00:07:55,900 --> 00:07:58,360
dan jika saya mengubahnya dan memuat ulang,

159
00:07:58,360 --> 00:08:00,850
kami melihat kami mengambil perubahan itu pada data,

160
00:08:00,850 --> 00:08:03,650
tetapi pada saat yang sama kami sepertinya mengirimkannya lagi.

161
00:08:03,650 --> 00:08:05,263
Dan tahukah Anda alasannya?

162
00:08:06,350 --> 00:08:08,990
kami mengirimkannya lagi karena di app.js

163
00:08:08,990 --> 00:08:11,780
kami memiliki efek ini untuk mengirim data keranjang

164
00:08:11,780 --> 00:08:14,940
yang akan kami jalankan setiap kali gerobak berubah.

165
00:08:14,940 --> 00:08:17,880
Masalahnya adalah ketika kita mengambil data cart,

166
00:08:17,880 --> 00:08:21,840
setelah pengambilan selesai, kami mengganti keranjang, bukan?

167
00:08:21,840 --> 00:08:23,230
Kami mengganti gerobak

168
00:08:24,110 --> 00:08:26,530
di sini dengan data yang diambil itu,

169
00:08:26,530 --> 00:08:29,890
yang mengubah keranjang di dalam Redux.

170
00:08:29,890 --> 00:08:32,049
Nah, semenjak gerobak itu kemudian berubah

171
00:08:32,049 --> 00:08:36,110
kami memicu efek aplikasi ini dan mengirim data keranjang lagi.

172
00:08:36,110 --> 00:08:37,883
Jadi bagaimana kita bisa menyiasatinya sekarang?